<template>
	<view class="mian" v-if="detailData">
		<scroll-view class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view v-if="detailData.image" class="img_goods">
					<image class="img" lazy-load mode="aspectFit" :src="detailData.image"></image>
				</view>
				<view v-else class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">暂无图片</view>
				</view>
				<view class="goods_main">
					<view class="brand">
						<view class="goods_name">
							{{detailData.goodsName}}
						</view>
						<view class="over_Insured">
							<span class="tag" v-if="!detailData.overInsured">在保</span>
							<span class="tag tag_p" v-else>已过保</span>
							<span class="day_color"
								v-if="!detailData.overInsured">质保周期:{{detailData.warrantyDay}}天</span>
						</view>
					</view>
					<view class="goods_ms">
						<span class="list_item"><span>型号：</span><span
								class="mo">{{detailData?.goodsModel}}</span></span>
						<span class="list_item"><span>规格：</span><span
								class="mo">{{detailData?.goodsSpecName}}</span></span>
					</view>
				</view>
				<view class="card">
					<view class="code_num">
						<view class="">
							<span class="c9">SN码/一物一码：</span>{{detailData.code}}
						</view>
						<image class="btn_c" @click="copy(detailData.code)" src="/static/copy.svg" mode="aspectFit">
						</image>
					</view>
					<p><span class="c9">质保开始：</span>{{detailData.warrantyStartTime}}</p>
					<view class="time">
						<p><span class="c9">质保结束：</span>{{detailData.warrantyEndTime}}</p>
						<view class="card_k" @click="goPages(detailData.id)">
							<p class="bule">查看电子保修卡</p><uni-icons color="#007cff" size="16" type="forward"></uni-icons>
						</view>
					</view>
				</view>
				<view class="service">
					<p class="title_tip">便捷服务</p>
					<view class="card_min">
						<view class="content_c" v-for="(i,index) in dataList1" @click="ondataList(index)"
							wx:key="index">
							<image class="bor_img" :class="{ctrl_svg:index==3}" :src="i.icon"></image>
							<span class="text">
								{{i.text}}
							</span>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹出申请方式-->
		<wayType ref="wayTypeRef" @value-change="addWorkor" :showpopup="showBottom">
		</wayType>
		<uni-popup ref="popupImg" :is-mask-click="false" background-color="#fff" type="center">
			<view
				style="display: flex;flex-direction: column;align-items: center;padding:50rpx 30rpx 20rpx;gap: 20rpx;">
				<view style="display: flex;justify-content: flex-end;width: 100%;position: absolute;top: 0;">
					<uni-icons class="icon" color="#ccc" @click="popupImg.close()" size="32" type="clear"></uni-icons>
				</view>
				<view style="border: 1px solid #eee;width: 420rpx;height: 420rpx;padding: 12rpx;margin: 20rpx;">
					<image mode="aspectFit" :show-menu-by-longpress="true" style="width: 420rpx;height: 420rpx;"
						:src="detailData.qrImage">
					</image>
				</view>
				<span style="font-size: 28rpx;color: #007cff;display: flex;align-items: center;justify-content: center;"
					@click="jumpLink">产品蓝牙遥控小程序 <uni-icons type="right" color="#007cff"></uni-icons></span>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
	import apiGoods from '@/util/api/goods.js'
	import store from '@/store/index.js'
	import wayType from "@/components/u-user/wayType.vue"
	import apiCode from '@/util/api/code.js'
	const detailData = ref(null)
	const goodsId = ref('')
	const wayTypeRef = ref()
	const showBottom = ref(false) //申请工单弹窗

	const popupImg = ref(null)//弹窗二维码
	const dataList1 = ref([{
		icon: "/static/home/serve/home1.svg",
		text: "安装服务",
	},
	{
		icon: "/static/home/serve/home2.svg",
		text: "维修服务",
	},
	{
		icon: "/static/home/serve/home4.svg",
		text: "旧机返厂",
	},
	{
		icon: "/static/home/serve/home5.svg",
		text: "蓝牙遥控",
	}, {
		icon: "/static/home/spzl.svg",
		text: "查看知识库",
	},
	{
		icon: "/static/home/sfbz.svg",
		text: "收费标准",
	},
		// {
		// 	icon: "/static/home/pjjg.svg",
		// 	text: "配件价格",
		// }
	])
	// 通过onLoad接收数据
	onLoad((e) => {
		goodsId.value = e.id
		getDetail(e.id)
	})
	// 刷新
	onPullDownRefresh(async () => {
		await Promise.all([getDetail(goodsId.value)]).then(() => {
			uni.stopPullDownRefresh()
		})
	})
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
	onUnload(() => {
		uni.hideLoading()
	})
	// 便捷服务
	const ondataList = async (val) => {
		switch (val) {
			case 0:
				store.commit('setorderGoodsTypes', [])
				store.commit('setchackFaultList', [])
				store.commit('setchackFaultItem', { id: null })
				store.commit('setWayType', {})
				store.commit('setcheckBrandItem', { id: null })
				store.commit('setcheckClassifyItem', { id: null })
				store.commit('setappointmentTime', null)
				store.commit('setUserOrder', {
					"address": "", //客户详细地址
					"area": "", //地址-县/区
					"city": "", //地址-市
					"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
					"name": "", //客户姓名
					"otherPhone": "", //其他电话
					"phone": "", //客户手机号
					"province": "", //地址-省
					"town": "", //地址-镇
					"userId": null
				})
				await wayTypeRef.value.open(1)
				showBottom.value = true
				break;
			case 1:
				store.commit('setorderGoodsTypes', [])
				store.commit('setchackFaultList', [])
				store.commit('setchackFaultItem', { id: null })
				store.commit('setWayType', {})
				store.commit('setcheckBrandItem', { id: null })
				store.commit('setcheckClassifyItem', { id: null })
				store.commit('setappointmentTime', null)
				store.commit('setUserOrder', {
					"address": "", //客户详细地址
					"area": "", //地址-县/区
					"city": "", //地址-市
					"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
					"name": "", //客户姓名
					"otherPhone": "", //其他电话
					"phone": "", //客户手机号
					"province": "", //地址-省
					"town": "", //地址-镇
					"userId": null
				})
					await wayTypeRef.value.open(2)
					// showBottom.value = true
				break;
			case 2:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
			case 3:
				if (detailData.value.qrImage) {
					popupImg.value.open()
				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#007cff',
						content: '该商品暂无该内容！'
					})
				}
				break;
			case 5:
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				apiCode.getGoodsTypeBySNCode(detailData.value?.code).then(res => {
					uni.hideLoading()
					if (res.code == 20000) {
						if (res.data.row.length > 0) {
							uni.navigateTo({
								url: '/pages_user/fee/standard?id=' + res.data.row[0].id
							})
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#007cff',
								content: '该商品暂无收费标准内容！'
							})
						}
					}
				})
				break;
			default:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
		}
	}
	// 长青小程序  家电遥控
	const jumpLink = () => {
		uni.navigateToMiniProgram({
			appId: 'wx2d353c114cb08e18',
			path: 'pages/deviceList/deviceList',
		})
	}
	// 电子保修卡信息
	const goPages = (id : string) => {
		uni.navigateTo({
			url: '/pages_user/card/detail?id=' + id
		})
	}
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type//1安装
		})
		showBottom.value = false
		uni.navigateTo({
			url: "/pages_user/home/add?code=" + detailData.value.code
		})
	}
	// 获取商品详情
	const getDetail = async (id) => {
		if (!id) return
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})
		await apiGoods.getGoodsDetail(id).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				detailData.value = res.data.row
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.mian {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 100rpx;
			}
		}

		.img_goods {
			height: 480rpx;
			background-color: rgba(0, 0, 0, 0.1);

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.void_goods {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			height: 480rpx;
			background-color: #fafafa;

			.img {
				width: 60%;
				height: 200rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.goods_main {
			margin: 0 0 24rpx;
			background-color: #fff;
			padding: 24rpx;

			.brand {
				color: #000;
				display: flex;
				// align-items: center;
				// justify-content: space-between;
				width: 100%;
				margin-bottom: 16rpx;
				align-items: center;
				column-gap: 12rpx;
				flex-wrap: wrap;
				row-gap: 12rpx;

				.over_Insured {
					display: flex;
					column-gap: 8rpx;
					// flex: 1;
					align-items: center;

					.tag {
						background-color: #007cff;
						color: #fff;
						font-size: 22rpx;
						border-radius: 4rpx;
						height: 28rpx;
						padding: 2rpx 4rpx;

						&.tag_p {
							background-color: #ccc;
							color: #fff;
						}
					}

					.day_color {
						background-color: #007cff;
						color: #fff;
						font-size: 22rpx;
						border-radius: 4rpx;
						height: 28rpx;
						padding: 2rpx 4rpx;
					}
				}


				.tip {
					// flex: 1;
					color: #007cff;
					font-size: 28rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;
				}
			}

			.goods_name {
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				word-wrap: break-word;
				word-break: break-all;
				// margin-bottom: 14rpx;
			}

			.goods_ms {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				flex-wrap: wrap;
				color: #777;
				column-gap: 12rpx;
				row-gap: 12rpx;

				.list_item {
					display: flex;
					font-size: 24rpx;
					flex-wrap: wrap;
					color: #777;
					row-gap: 12rpx;
				}

				.mo {
					color: #000;
					flex: 1;
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}

		.card {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			row-gap: 14rpx;

			.code_num {
				display: flex;
				align-items: center;
				column-gap: 24rpx;

				.btn_c {
					height: 30rpx;
					line-height: 30rpx;
					width: 24rpx;
				}
			}

			.c9 {
				color: #777;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_k {
					display: flex;
					align-items: center;
					line-height: 24rpx;
					height: 24rpx;

					.bule {
						color: #007cff;
						margin-right: 14rpx;
						line-height: 24rpx;
						height: 24rpx;
					}
				}

			}

		}

		.service {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;

			.title_tip {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.card_min {
				align-items: center;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr));
				row-gap: 24rpx;
				padding: 24rpx 0;

				.content_c {
					// width: calc(100%/3);
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					row-gap: 6rpx;

					.bor_img {
						width: 60rpx;
						height: 60rpx;
						background-color: #f2f9ff;
						padding: 14rpx;
						border-radius: 10rpx;
					}

					.ctrl_svg {
						width: 64rpx;
						height: 64rpx;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}

		.popup_way {
			height: 60vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 20rpx 0;
				font-weight: bold;

				.icon {
					position: absolute;
					right: 40rpx;
					font-weight: 500;
				}
			}

			.height_list {
				height: 100%;
				overflow: auto;

				.way_name {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		:deep(.uni-popup) {
			z-index: 999;
		}
	}
</style>